<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>预约管理<small>预约设置</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>预约设置</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="box ordersetting">
                <el-card class="box-card">
                    <div class="boxMain">
                        <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate()">模板下载</el-button>
                        <el-upload action="http://localhost:9002/ordersetting/upload"
                                   name="excelFile"
                                   :show-file-list="false"
                                   :on-success="handleSuccess"
                                   :before-upload="beforeUpload">
                            <el-button type="primary">上传文件</el-button>
                        </el-upload>
                    </div>
                    <div>
                        操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
                    </div>
                </el-card>
                <div class="calendar">
                    <!-- 年份 月份 -->
                    <div class="month">
                        <div class="currentdate">
                            <span class="choose-year">{{ currentYear }}年</span>
                            <span class="choose-month">{{ currentMonth }}月</span>
                        </div>
                        <div class="choose">
                            <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                            <span @click="pickPre(currentYear,currentMonth)">❮</span>
                            <span @click="pickNext(currentYear,currentMonth)">❯</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <!-- 星期 -->
                    <div class="caldate">
                        <ul class="weekdays">
                            <li>周一</li>
                            <li>周二</li>
                            <li>周三</li>
                            <li>周四</li>
                            <li>周五</li>
                            <li>周六</li>
                            <li>周日</li>
                        </ul>
                        <!-- 日期 -->
                        <ul class="days">
                            <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                            <li v-for="dayobject in days">
                                <template>
                                    <!-- 非当前月份 -->
                                    <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                                        {{ dayobject.day.getDate() }}
                                    </div>
                                    <!-- 当前月 -->
                                    <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                                        <span class="datenumber">{{ dayobject.day.getDate()}}</span>
                                        <template>
                                            <template v-for="obj in leftobj">
                                                <template v-if="obj.date == dayobject.day.getDate()">
                                                    <template v-if="obj.number > obj.reservations">
                                                        <div class="usual">
                                                            <p>可预约{{obj.number}}人</p>
                                                            <p>已预约{{obj.reservations}}人</p>
                                                        </div>
                                                    </template>
                                                    <template v-else>
                                                        <div class="fulled">
                                                            <p>可预约{{obj.number}}人</p>
                                                            <p>已预约{{obj.reservations}}人</p>
                                                            <p>已满</p>
                                                        </div>
                                                    </template>
                                                </template>
                                            </template>
                                            <button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)" class="orderbtn">设置</button>
                                        </template>

                                    </div>
                                </template>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    new Vue({

        el: '#app',
        data:{
            backend_url:"http://localhost:9002",
            today:new Date(),
            currentDay: 1,
            currentMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],  // 封装每一天的日期对象(Date对象)和index，遍历日历使用的数据模型
            leftobj: []//用于装载页面显示的月份已经进行预约设置的数据，从服务端获取的数据
        },
        created: function () {//在vue初始化时调用
            this.initData(null);
        },
        methods: {
            handleOrderSet(day){
                //alert(day);
                this.$prompt("输入可设置人数","预约设置",{
                    confirmButtonText:"确定",
                    cancelButtonText:"取消",
                    inputPattern:/^[0-9]*[1-9][0-9]*$/,
                    inputErrorMessage:"必须输入正整数"
                }).then(({value})=>{
                    //alert(value);
                    var formDatas = {
                        orderDate:this.formatDate(day.getFullYear(),day.getMonth()+1,day.getDate()),
                        number:value
                    };
                    console.log(formDatas);
                    axios.post(this.backend_url + "/ordersetting/editNumberByDate",formDatas).then((response) => {
                        if (response.data.flag) {
                            this.initData(this.formatDate(day.getFullYear(), day.getMonth()+1,1));
                            this.$message.success(response.data.message);
                        } else {
                            //失败消息提醒
                            this.$message.error(response.data.message);
                        }
                    }).catch((error) => {
                        console.log(error);
                        this.$message.error("网络异常");
                    });

                })
            },
            beforeUpload(file){
                console.log(file.name);
                // 使用后缀名，判断文件类型
                var fileName = file.name;
                var fileType = fileName.substr(fileName.lastIndexOf("."));
                console.log("fileType:"+fileType);
                const isXLS = fileType === '.xls';
                if(isXLS){
                    return true;
                }
                const isXLSX = fileType === '.xlsx';
                if (isXLSX) {
                    return true;
                }
                this.$message.error('上传文件只能是xls或者xlsx格式!');
                return false;
            },
            downloadTemplate(){
                window.location.href="../template/ordersetting_template.xlsx";
            },
            handleSuccess(response, file) {
                if(response.flag){
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                }else{
                    this.$message.error(response.message);
                }
                console.log(response, file);
            },
            initData: function (cur) {
                var date;
                var index = 0;   //控制显示预定的天数
                // 设置起始日期
                if (cur) {
                    date = new Date(cur);
                } else {
                    var now = new Date();
                    date = new Date(this.formatDate(now.getFullYear(), now.getMonth()+1, 1));
                }
                // 获取起始日期的日期元素，当年、当月、当日、当周(本月第一天是周几)
                this.currentDay = date.getDate();
                this.currentYear = date.getFullYear();
                this.currentMonth = date.getMonth() + 1;
                this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）2019-6-1 是周六
                console.log(this.currentYear+" "+" "+this.currentMonth+" "+this.currentDay+" week:"+this.currentWeek );
                var today = new Date();
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                // 封装一个字符串日期 2019-6-1
                var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                console.log("str:"+str);
                this.days.length = 0;
                // 今天是周日，放在第一行第7个位置，前面6个
                //初始化本周数据,把日期对象封装到dayobject中,并把其放入days数组
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);
                    var dayobject = {};
                    dayobject.day = d;
                    this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                }
                console.log(this.days[0]);
                console.log(this.days);
                // 封装从当前日期开始的42天的日期数据，42天是正好7周的数据，月份前后最大跨度6周，比如9月
                for (var i = 1; i <= 42 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayobject = {};//dayobject   {day:date}
                    dayobject.day = d;
                    this.days.push(dayobject);
                }
                // this.leftobj = [
                //     { date: 3, number: 100, reservations: 0 },
                //     { date: 4, number: 200, reservations: 0 },
                //     { date: 5, number: 112, reservations: 0 },
                //     { date: 6, number: 335, reservations: 0 },
                //     { date: 10, number: 300, reservations: 0 },
                //     { date: 11, number: 20, reservations: 20 },
                //     { date: 12, number: 30, reservations: 30 },
                //     { date: 13, number: 200, reservations: 0 },
                // ];
                // 发送ajax请求，获取真实数据
                var param = {
                        year:this.currentYear,
                        month:this.currentMonth
                    };
                 axios.get(this.backend_url+"/ordersetting/getOrderSettingByMonth",{params:param}).then((response)=>{
                    if(response.data.flag){
                        this.leftobj = response.data.data;
                    }else{
                         //失败消息提醒
                        this.$message.error(response.data.message);
                    }
                 }).catch((error)=>{
                    console.log(error);
                    this.$message.error("网络异常");
                 });

            },
            goCurrentMonth: function (year, month) {
                var d = new Date();
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            pickPre: function (year, month) {
                // setDate(0); 上月最后一天
                // setDate(-1); 上月倒数第二天
                // setDate(dx) 参数dx为 上月最后一天的前后dx天
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            pickNext: function (year, month) {
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(35);////获取指定天之后的日期
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            // 返回 类似 2016-01-02 格式的字符串
            formatDate: function (year, month, day) {
                var y = year;
                var m = month;
                if (m < 10) m = "0" + m;
                var d = day;
                if (d < 10) d = "0" + d;
                return y + "-" + m + "-" + d
            }
        }
    })
</script>
</html>